<html>
<head>
<script src="${ctxPath}/resource/js/jquery-2.1.3.min.js"></script>
<script src="${ctxPath}/resource/js/time.js"></script>
<script>
$(document).ready(function(){
	  loadTable(1);
	  
	  $(document).on('click','.page',function(){
	  	var action = $(this).html();
	  	var current = parseInt($("#current").html());
	  	var page = current;
	  	if(action=="next"){
	  		page++;
	  	}else{
	  		page--;
	  	}
	  	loadTable(page);
	  	
	  });
	});
	
	function loadTable(page){
		 startTime();
		 $.post("beetlajax_data.html",{'page':page},function(result){
			 
			 $("tbody").children().remove();
			 var array = eval('(' + result + ')');			 
			 for(var i=0;i<array.length;i++){
				var item = array[i];
				var tr = "<tr><td>"+item.id+"</td><td>"+item.name+"</td></tr>";
				$(tr).appendTo("tbody");
				//$("tbody").appendTo(tr);
			 }
			 endTime();
		 });
		 $('#current').html(page);
		 
	}
	
	
	
	

</script>
</head>
<body>
这是一个jsonajax测试页面,加载时间是: ${date(),'yyyy-MM-dd:hh:mm:ss'}
<p>
<div id="table-container" >


<table>
	<thead><tr><td width=100>id</td><td width=100>姓名</td></tr></thead>
	<tbody></tbody>
	
</table>

当前页面<span id="current">1</span><span style="width:20px"></span> 
<a href="#"><span  class="page">next</span></a> <a href="#" ><span  class="page">pre</span></a> 
<br/>
耗时<span id="time" ></span>

</div>
</body>
</html>
